<template>
  <Layout>
    <div class="flexs">
      <Form style="width: 50%" ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="name">
          <Input type="text" v-model="formInline.name" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="username">
          <Input type="password" v-model="formInline.username" placeholder="Password">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="default" @click="handleSubmit">登录</Button>
          <Button type="default">注册</Button>
        </FormItem>
      </Form>
    </div>
  </Layout>
</template>

<script>
import axios from 'axios';
export default {
    data(){
      return{
        api:process.env.VUE_APP_API,
        formInline: {
          name: '',
          username: ''
        },
        ruleInline: {
          user: [
            { required: true, message: 'Please fill in the user name', trigger: 'blur' }
          ],
          password: [
            { required: true, message: 'Please fill in the password.', trigger: 'blur' },
            { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
          ]
        }
      }
    },
  methods:{
    handleSubmit() {
      this.$Loading.start();
      axios({
        method:'get',
        url:this.api+'/users',
        params:this.formInline,
      }).then(res=>{
        console.log(res);
        if(res.data.length>0){
          sessionStorage.setItem('name',this.formInline.name);
          this.$Loading.finish();
          this.$router.push({name:'userinfo'});
        }else{
          this.$Message.info('登陆失败');
          this.$Loading.finish();
        }
      }).catch(error=>{
        this.$Loading.error();
        console.log(error);
      })
      // sessionStorage.setItem('name',this.formInline.name);
      // this.$router.push({name:'demos'})
    }
  }
}
</script>

<style scoped>
  .flexs {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
  }
</style>
